<template>
	<view>
		<!-- 标题 文字和ICON的弹窗 -->
		<template v-if="mode == 0">
			<u-popup :value="value" :mask-close-able='false' mode='center' duration='400' border-radius="14" width="70%">
				<view class="warp">
					<view class="title bigfontsize" v-if="maskparam.title!=''">
						{{maskparam.title}}
					</view>
					<u-image v-if="maskparam.icon" :width="imageWidth" class="u-skeleton-rect" :src="maskparam.icon"
						mode="widthFix">
					</u-image>
					<view class="Password">
						{{maskparam.text}}
					</view>
					<view class="bens2">
						<view v-if="!maskparam.btn[1]" class="btn1" @click.stop="clickbtn1"
						:style="{ backgroundColor:`${btnColor}`}"
						>
						<!-- 线性边框+活跃字体色 
						:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
						浅灰色按钮+浅灰色字体
						:style="{color:`#999999`,backgroundColor:`#F0F0F0`}"
						-->
							{{maskparam.btn[0]}}
						</view>
						<template v-if="maskparam.btn[1]" >
							<view class="share2" @click.stop="clickbtn1"
							:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
							>
							{{maskparam.btn[0]}}
							</view>
							<view class="share2 c2" @click.stop="clickbtn2"
							:style="{ backgroundColor:`${btnColor}` }"
							>{{maskparam.btn[1]}}
							</view>
						</template>
					</view>
				</view>
			</u-popup>
		</template>
		<!-- 只有标题和文字的弹窗 -->
		<view v-if="mode == 1">
			<u-mask :show="value" :mask-close-able='false' :duration="400" :zoom="true" @click="updtype">
				<view class="warp">
					<view class="title bigfontsize" v-if="maskparam.title!=''">
						{{maskparam.title}}
					</view>
					<view class="Password">
						{{maskparam.text}}
					</view>
					<view class="bens2">
						<view v-if="!maskparam.btn[1]" class="btn1" @click.stop="clickbtn1"
						:style="{ backgroundColor:`${btnColor}`}"
						>
						<!-- 线性边框+活跃字体色 
						:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
						浅灰色按钮+浅灰色字体
						:style="{color:`#999999`,backgroundColor:`#F0F0F0`}"
						-->
							{{maskparam.btn[0]}}
						</view>
						<template v-if="maskparam.btn[1]" >
							<view class="share2" @click.stop="clickbtn1"
							:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
							>
							{{maskparam.btn[0]}}
							</view>
							<view class="share2 c2" @click.stop="clickbtn2"
							:style="{ backgroundColor:`${btnColor}` }"
							>{{maskparam.btn[1]}}
							</view>
						</template>
					</view>
				</view>
			</u-mask>
		</view>
		<!-- 打怪成功失败的弹窗 带图弹窗 -->
		<template v-if="mode == 2">
			<u-popup :value="value" :mask-close-able='false' :negative-top='300' mode='center' duration='400' border-radius="14" width="70%">
				<view class="u-skeleton-rect myimg2">
					<u-image v-if="maskparam.icon" width="100%" :src="maskparam.icon" mode="widthFix"></u-image>
				</view>
				<view class="warp2">
					<view class="title bigfontsize" v-if="maskparam.title!=''">
						{{maskparam.title}}
					</view>
					<view class="Password">
						{{maskparam.text}}
					</view>
					<view class="bens2">
						<view v-if="!maskparam.btn[1]" class="btn1" @click.stop="clickbtn1"
						:style="{ backgroundColor:`${btnColor}`}"
						>
						<!-- 线性边框+活跃字体色 
						:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
						浅灰色按钮+浅灰色字体
						:style="{color:`#999999`,backgroundColor:`#F0F0F0`}"
						-->
							{{maskparam.btn[0]}}
						</view>
						<template v-if="maskparam.btn[1]" >
							<view class="share2" @click.stop="clickbtn1"
							:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
							>
							{{maskparam.btn[0]}}
							</view>
							<view class="share2 c2" @click.stop="clickbtn2"
							:style="{ backgroundColor:`${btnColor}` }"
							>{{maskparam.btn[1]}}
							</view>
						</template>
					</view>
				</view>
			</u-popup>
		</template>
		<!-- 支付的弹窗 有金额显示 输入密码 -->
		<template v-if="mode == 3">	<!-- :closeable='true' :closeable='true' -->
			<u-popup :value="value"  :mask-close-able='false' :negative-top='300' mode='center' duration='400' border-radius="14" width="70%" z-index="99999">
					<view class="warp3">
						<view class="title" v-if="maskparam.title!=''">
							<u-icon name="close" @click="closealert" color="#242424" size="28" style="position: absolute;left: 30rpx;margin-top: 5rpx;"></u-icon>
							{{maskparam.title}}
						</view>
						<view class="Password">
							{{maskparam.text}}
						</view>
						<view class="num">
							{{parseFloat(maskparam.nuoli)}}.00
						</view>
						<u-divider :use-slot='false' border-color='#c1c1c1' half-width='220'></u-divider>
						<view class="ServiceF" v-if="maskparam.pwdmode == 4">
							<!-- 只有打怪时需要扣银诺丽 -->
							<view class="Service">
								<view>
									服务费
								</view>
								<view>
									{{parseFloat((maskparam.nuoli*(maskparam.baifenbi/100)).toFixed(2))}}
								</view>
							</view>
							<view class="Service">
								<view>
									费率
								</view>
								<view>
									{{maskparam.baifenbi}}%(人民币)
								</view>
							</view>
						</view>
						<view class="pwd">
							<!-- :disabled-keyboard='true' @change="change"   :value='verystar' -->
							<u-message-input v-model='pwdvalue' :dot-fill='true' @finish="finish" :focus="true" :maxlength="6" :active-color='btnColor' inactive-color='#606266' style="line-height: 60rpx;"
							 width='60'></u-message-input>
							<!-- <pwdInput v-model="pwdvalue" @value='value'></pwdInput> -->
						</view>
					</view>
					<!-- <u-keyboard style="color: #000000;" @cancel='closealert' @change="valChange" :mask-close-able='false' z-index="999" @backspace="backspace" mode="number" :show-tips='false' :confirm-btn='false'
						 v-if="mode == 3" v-model="value" :mask='false' cancel-text='取消支付'>
					</u-keyboard> -->
			</u-popup>

		</template>
		<!-- 顶部带图 中间带icon弹窗 -->
		<template v-if="mode == 4">
			<u-popup :value="value" :mask-close-able='true' :negative-top='300' mode='center' duration='400' border-radius="14" width="70%">
				<view class="u-skeleton-rect myimg2">
					<u-image v-if="maskparam.icon" width="100%" :src="maskparam.icon" mode="widthFix"></u-image>
				</view>
				<view class="warp2">
					<view class="title bigfontsize" v-if="maskparam.title!=''">
						{{maskparam.title}}
					</view>
					<u-image v-if="maskparam.icon2" :width="imageWidth" class="u-skeleton-rect" :src="maskparam.icon2"
						mode="widthFix">
					</u-image>
					<view class="title bigfontsize fs34 fw_b" style="color:#D75E02 ;margin-top: 5rpx;">
						{{maskparam.text}}
					</view>
					<view class="bens2">
						<view :class="maskparam.btn[1] ? 'share2 c3' : 'btn1 c3 fs34' " @click.stop="clickbtn1">
							{{maskparam.btn[0]}}
						</view>
						<view v-if="maskparam.btn[1]" class="share2 c2" @click.stop="clickbtn2">{{maskparam.btn[1]}}
						</view>
					</view>
				</view>
			</u-popup>
		</template>
		<!-- 更加简便的支付弹窗 无金额显示 仅有输入密码 -->
		<template v-if="mode == 5">	<!-- :closeable='true' :closeable='true' -->
			<u-popup :value="value"  :mask-close-able='false' :negative-top='300' mode='center' duration='400' border-radius="14" width="70%" z-index="99999">
					<view class="warp3">
						<view class="title" v-if="maskparam.title!=''">
							<u-icon name="close" @click="closealert" color="#242424" size="28" style="position: absolute;left: 30rpx;margin-top: 5rpx;"></u-icon>
							{{maskparam.title}}
						</view>
						<view class="Password" :style="`color:${btnColor};`">
							{{maskparam.alerttext}}
						</view>
						<view class="num" v-if="false">
							{{parseFloat(maskparam.nuoli)}}.00
						</view>
						<u-divider :use-slot='false' border-color='#c1c1c1' half-width='220'></u-divider>
						<view class="ServiceF" v-if="maskparam.pwdmode == 4">
							<!-- 只有打怪时需要扣银诺丽 -->
							<view class="Service">
								<view>
									服务费
								</view>
								<view>
									{{parseFloat((maskparam.nuoli*(maskparam.baifenbi/100)).toFixed(2))}}
								</view>
							</view>
							<view class="Service">
								<view>
									费率
								</view>
								<view>
									2%(银诺丽)
								</view>
							</view>
						</view>
						<view class="pwd">
							<!-- :disabled-keyboard='true' @change="change"   :value='verystar' -->
							<u-message-input v-model='pwdvalue' :dot-fill='true' @finish="finish" :focus="true" :maxlength="6" :active-color='btnColor' inactive-color='#606266' style="line-height: 60rpx;"
							 width='60'></u-message-input>
							<!-- <pwdInput v-model="pwdvalue" @value='value'></pwdInput> -->
						</view>
						<view class="payBtn" :style="`backgroundColor:${btnColor};`" @click="topay">
							确认支付
						</view>
					</view>
					<!-- <u-keyboard style="color: #000000;" @cancel='closealert' @change="valChange" :mask-close-able='false' z-index="999" @backspace="backspace" mode="number" :show-tips='false' :confirm-btn='false'
						 v-if="mode == 3" v-model="value" :mask='false' cancel-text='取消支付'>
					</u-keyboard> -->
			</u-popup>
		</template>
		<!-- 协议弹窗 -->
		<template v-if="mode == 6">
			<u-mask :show="value">
				<view class="maskRow2">
					<!-- <image src="../../static/home/tz.png" class="tzImg"></image> -->
					<view class="ruleTit m_t_20">{{maskparam.title}}</view>
					<scroll-view scroll-y="true" class="decRow" @touchmove.stop>
						<text>{{maskparam.text}}</text>
						<!-- <u-parse :html="htmlText.notice_content"></u-parse> -->
						<!-- <rich-text :nodes="htmlText.notice_content"></rich-text> -->
					</scroll-view>
					<!-- <view style="height: 50rpx;"></view> -->
					<view class="bens2">
						<view v-if="!maskparam.btn[1]" class="btn1" @click.stop="clickbtn1"
						:style="{ backgroundColor:`${btnColor}`}"
						>
						<!-- 线性边框+活跃字体色 
						:style="{ color:`${btnColor}`,border:`1rpx solid ${btnColor}`}" 
						浅灰色按钮+浅灰色字体
						:style="{color:`#999999`,backgroundColor:`#F0F0F0`}"
						-->
							{{maskparam.btn[0]}}
						</view>
						<template v-if="maskparam.btn[1]" >
							<view class="share2" @click.stop="clickbtn1"
							:style="{color:`#999999`,backgroundColor:`#F0F0F0`}"
							>
							{{maskparam.btn[0]}}
							</view>
							<view class="share2 c2" @click.stop="clickbtn2"
							:style="{ backgroundColor:`${btnColor}` }"
							>{{maskparam.btn[1]}}
							</view>
						</template>
					</view>
				</view>
			</u-mask>
		</template>
	</view>
</template>

<script>
	/* import pwdInput from '@/components/pwd-input/pwd-input.vue' */
	export default {
		name: "alert",
		/* components:{
			pwdInput:pwdInput
		}, */
		props: {
			//mode为0 弹窗为图片/图文/有标题文本弹窗 mode为2 弹窗为顶部带图弹窗 mode为3 为支付弹窗
			mode: {
				type: Number,
				default: "text",
			},
			maskparam: {
				type: Object,
				default: () => {
					return {
						/* textAline:"center", */
					};
				}
			},
			btnColor:{
				type: String,
				default: '#000000'
			},
			imageWidth: {
				default: '170',
				type: String
			},
			nameStyle: {
				type: Object,
				default: () => {
					return {
						textAline: "center",
					};
				}
			},
			value: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				pwdvalue:'',
				verystar:'',
				alertShow:this.value,
			};
		},

		created() {
			console.log('弹窗组建状态', this.value);
			/* this.alertShow = this.value
			console.log(this.alertShow); */
		},
		methods: {
			topay(){
				this.$emit("topay");
			},
			closealert(){
				console.log("内部closealert");
				this.$emit("closealert",false);
				this.pwdvalue = ''
				this.verystar = ''
			},
			updtype() {
				this.$emit("offmask");
				this.pwdvalue = ''
				this.verystar = ''
			},
			clickbtn1() {
				this.$emit("clickbtn1")
				this.pwdvalue = ''
				this.verystar = ''
			},
			clickbtn2() {
				this.$emit("clickbtn2")
				this.pwdvalue = ''
				this.verystar = ''
			},
			// 按键被点击(点击退格键不会触发此事件)
			change(val){
				/* console.log("change",val);
				if(this.pwdvalue.length < 6){
					this.pwdvalue += val;
					this.verystar += '*'
				} */
				/* if(this.pwdvalue.length == 6){
					console.log("emit",this.pwdvalue);
					this.$emit('finish',this.pwdvalue)
					this.pwdvalue = ''
					this.verystar = ''
				} */
			},
			finish(value){
				console.log('finish',value);
				this.$emit('finish',value)
				this.pwdvalue = ''
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.pwdvalue.length) this.pwdvalue = this.pwdvalue.substr(0, this.pwdvalue.length - 1);
				if (this.verystar.length) this.verystar = this.verystar.substr(0, this.verystar.length - 1);
				console.log(this.pwdvalue);
			}
		}
	}
</script>

<style lang="scss">
	* {
		color: #000000;
	}

	::v-deep .u-mode-center-box {
		background-color: transparent;
	}
	::v-deep .u-keyboard-grids-btn{
		color: #000000 !important;
	}
	::v-deep .u-char-item{
		line-height: 60rpx;
		color: #000000 !important;
	}
	::v-deep .uni-view, uni-text{
		line-height: 60rpx;
		color: #000000 !important;
	}
	.maskRow2 {
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 520rpx;
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		position: absolute;
	
		.ruleTit {
			font-size: 30rpx;
			font-weight: 500;
			color: #141414;
		}
	
		.decRow {
			width: 100%;
			text-align: left;
			//min-height 15vh;
			min-height: 2vh;
			max-height: 25vh;
			// height: 30vh;
			margin: 30rpx 0;
		}
	
		.agrBtn {
			position: absolute;
			width: 80%;
			height: 66rpx;
			border-radius: 48rpx;
			line-height: 66rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			bottom: 20rpx;
		}
	}
	.mask {
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 700;
		top: 0;
	}

	.warp {
		//#
		z-index: 999;
		/* background-color: transparent !important; */
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 10rpx;
		padding-top: 50rpx;
		width: 100%;
		margin: auto;
		display: flex;
		align-items: center;
		flex-direction: column;

		image {
			max-width: 300rpx;
			max-height: 300rpx;
		}
	}
	::v-deep .u-drawer__scroll-view{
		background-color: transparent ;
	}

	.warp3 {
		z-index: 999;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 10rpx;
		/* padding-top: 50rpx; */
		width: 100%;
		margin: auto;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			font-weight: 550;
			font-size: 26rpx;
			letter-spacing: 1rpx;
		}

		.num {
			font-size: 42rpx;
			font-weight: 600;
			padding-bottom: 30rpx;
		}

		.payBtn{
			margin-top: 20rpx;;
			color: #FFFFFF;
			padding: 20rpx 100rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
			letter-spacing: 1rpx;
		}

		.ServiceF {
			width: 100%;
			padding: 15rpx 30rpx;
			padding-bottom: 0;
			.Service {
				font-size: 22rpx;
				line-height: 40rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.pwd {
			width: 100%;
			margin-top: 20rpx;
			color: #0078FF !important;
		}

	}

	.myimg {
		width: 100%;
		margin-left: 10rpx;
	}
	.myimg2 {
		width: 90%;
		//margin-left: 10rpx;
		margin-top: -30rpx;
		margin: auto;
	}
	.warp2 {
		//#
		z-index: 999;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 10rpx;
		padding-top: 90rpx;
		width: 100%;
		margin: auto;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: -100rpx;
	
		image {
			max-width: 300rpx;
			max-height: 300rpx;
		}
	}

	.bens2 {
		display: flex;
		text-align: center;
		width: 100%;
		font-size: 28rpx;
		margin-top: 20rpx;
		align-items: center;
		justify-content: space-evenly;
		/* #ifdef APP */
		justify-content: space-around;
		/* #endif */

		.btn1 {
			
			width: 85%;
			height: 68rpx;
			line-height: 68rpx;
			padding: 0 30rpx;
			border-radius: 50rpx;
			color: #FFFFFF;
		}
		.c0{
			background-color: #5755F8;
		}
		.cn0{
			background-color: #000000;
		}

		.c1 {
			color: #5755F8;
			border: 1px solid #5755F8;
			background-color: #FFFFFF;
		}
		.c4 {
			color: #000000;
			border: 1px solid #000000;
			background-color: #FFFFFF;
		}

		.c2 {
			background-color: #5755F8;
			color: #FFFFFF;
		}
		
		.c5 {
			background-color: #000000;
			color: #FFFFFF;
		}

		.c3 {
			background-color: #feac1c;
			color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
		}

		.share2 {
			width: 39%;
			text-align: center;
			height: 68rpx;
			line-height: 68rpx;
			// padding: 0 30rpx;
			border-radius: 50rpx;
		}
	}

	.title {
		/* position: absolute;
		top: 10rpx;
		margin: 20rpx; */
		margin-bottom: 30rpx;
		font-size: 34rpx;
		letter-spacing: 3rpx;
	}

	.Password {
		margin: 10rpx 0;
		padding: 0 25rpx;
		padding-bottom: 10rpx;
	}

	.bigfontsize {
		font-weight: 600;
	}
</style>
